<template>
  <div>
    <div class="product-list">
      <div v-for="product in productList" :key="product.productId" class="product"
        @click="goProductDetail(product.productId)">
        <el-image class="product-image" :src="product.productPicture"></el-image>
        <div class="product-name">{{ product.productName }}</div>
        <div class="product-desc">{{ product.productDesc }}</div>
        <div class="product-price">￥{{ product.productPrice }}</div>
        <div class="product-desc">
          <span>销售量{{ product.sellNumber }}</span><br>
          <span>评分总数{{ product.commentScore }}</span>
        </div>
      </div>
    </div>
    <el-pagination class="pagination" background layout="prev, pager, next,total" :total="total" :page-size="pageSize"
      :page-num="pageNum" @current-change="pageChange" />
  </div>
</template>

<script>
import { getProductPages } from '@/api/product'
export default {
  data () {
    return {
      companyId: this.$route.query.companyId,
      keyword: this.$route.query.keyword,
      productList: [],
      total: 0,
      pageNum: 1,
      pageSize: 5

    }
  },
  mounted () {
    this.load()
  },
  methods: {
    async load () {
      const data = await getProductPages({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        companyId: this.companyId,
        keyword: this.keyword
      })

      this.productList = data.data.records
      this.total = data.data.total
      console.log('1111', this.productList);
    },
    goProductDetail (productId) {
      this.$router.push(`/productDetail?productId=${productId}`)
    },
    pageChange (page) {
      this.pageNum = page
      this.load()
    }
  }
}
</script>

<style lang="scss" scoped>
.product-list {
  min-height: 800px;
}

.product {
  display: flex;
  border-bottom: 1px solid #999999;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;

  .product-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
  }

  .product-name {
    margin-left: 100px;
    width: 250px;
  }

  .product-desc {
    margin-left: 20px;
    width: 250px;
  }

  .product-price {
    margin-left: 100px;
    width: 200px;
    color: red;
  }
}

.pagination {
  margin: 20px;
}
</style>
